<template>
  <!-- 菜单 -->
  <div>
    <div class="top">
      <el-row>
        <el-button type="primary">+ 新增</el-button>
      </el-row>
    </div>
    <div class="">
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop='menuId'
                         label="Id"
                         align='center'
                         width="80"></el-table-column>
        <el-table-column prop='menuName'
                         label="用户名"
                         align='center'
                         width="80"></el-table-column>
        <el-table-column prop='linkUrl'
                         label="链接"
                         align='center'
                         width="80"></el-table-column>
        <el-table-column prop='status'
                         label="状态"
                         align='center'
                         width="80"></el-table-column>
        <el-table-column prop='createTime'
                         label="创建时间"
                         align='center'
                         width="240">
          <template slot-scope='scoped'>
            {{scoped.row.createTime | timer}}
          </template></el-table-column>
        <el-table-column prop='updateTime'
                         label="更新时间"
                         align='center'
                         width="240">
          <template slot-scope='scoped'>
            {{scoped.row.updateTime | times}}
          </template></el-table-column>
        <el-table-column label="操作"
                         align='center'>
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getMenu } from '@/api'
export default {
  data () {
    return {
      currentPage: 1,
      input: '',
      tableData: [],
    }
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
    },
    handleDelete (index, row) {
      console.log(index, row);
    },
    getMenu () {
      getMenu().then(data => {
        // console.log(data)
        if (data.data.code == 200 && data.data.msg == "成功") {
          this.tableData = data.data.data
        }
        // this.getMenu
      })
    },
  },
  created () {
    this.getMenu()
  },
}
</script>

<style lang ='less' scoped>
.top {
  padding: 0 30px;
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.page {
  margin-left: 300px;
}
</style>